import React, {Component} from 'react';
import { Card} from 'antd-mobile';
import {Link} from "react-router-dom";
import './NewsList.scss'
import http from "../../../util/http";
class NewsList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            NewsList: [ ]
        }
    }

    componentDidMount() {
        http.get('api/news/list',{page:this.props.pageInfo}).then(({data}) => {
            if (data.code === 200) {
                const  NewsList=data.data.list;
                this.setState({
                    NewsList
                })
            } else {
                alert(data.msg)
            }
        })
    }
    renderNewsList() {
        return this.state.NewsList.map(item => (
                <Card full={true} key={item.newsId}>
                    <Card.Body>
                        <div className={"NewsList-item"}>
                            <div className="middle">
                                <div className={"test1"}>{item.title}</div>
                                <div className={"test2"}>{item.introduction}</div>
                            </div>
                            <Link className="right" to={`/newsInfo?newsId=${item.newsId}`}>
                                <img src={ process.env.REACT_APP_BASE_API+"/img/"+item.cover} alt={item.title} width={"80"} height={"90"} />
                            </Link>
                        </div>
                    </Card.Body>
                    <Card.Footer content={
                        <span className={"content"}>{item.author} </span>
                    } extra={
                        <div className={"extra"}>
                            <span className={"like"}>{item.releaseDate}</span>
                        </div>
                    }/>
                </Card>
        ))
    }

    render() {
        if (this.state.NewsList.length!==0){
            return (
                <div className={"NewsList"}>
                    {
                        this.renderNewsList()
                    }
                </div>
            );
        }else {
            return <></>
        }
    }
}

export default NewsList;
